import Taro from "@tarojs/taro";
import { AtForm, AtInput, AtButton } from "taro-ui"; 
import "./form001.scss";

export default class form001 extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
    };
  }
  config = {
    navigationBarTitleText: "form",
  };
  handleChange(value,e) {
    this.setState({
        [e.currentTarget.name]: value
    });
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value;
  }
 
  onSubmit(event) {
    console.log(this.state.value1+this.state.value2+this.state.value3+this.state.value4+this.state.value5);
    
  }
  onReset(e) {
    this.setState({
        value1: "",
        value2:""
    });
    e.preventDefault();
  }
  
  render() {
    return (
      <AtForm
        onSubmit={this.onSubmit.bind(this)}
      >
        <AtInput
          name="value1"
          title="文本"
          type="text"
          placeholder="单行文本"
          value={this.state.value1}
          onChange={this.handleChange.bind(this)}
        />
        <AtInput
          name="value2"
          title="数字"
          type="number"
          placeholder="请输入数字"
          value={this.state.value2}
          onChange={this.handleChange.bind(this)}
        />
        <AtInput
          name="value3"
          title="密码"
          type="password"
          placeholder="密码不能少于10位数"
          value={this.state.value3}
          onChange={this.handleChange.bind(this)}
        />
        <AtInput
          name="value4"
          title="身份证"
          type="idcard"
          placeholder="身份证号码"
          value={this.state.value4}
          onChange={this.handleChange.bind(this)}
        />
        <AtInput
          name="value5"
          title="小数"
          type="digit"
          placeholder="请输入小数"
          value={this.state.value5}
          onChange={this.handleChange.bind(this)}
        />
        <AtButton   formType="submit">
          提交
        </AtButton>
        <br />
        <AtButton   onClick={this.onReset.bind(this)}>
          重置
        </AtButton>
      </AtForm>
    );
  }
}
